---
title: Install Expo Router
description: Learn how to quickly get started by creating a new project with Expo Router or adding the library to an existing project.
sidebar_title: Installation
searchRank: 6
---

import { Collapsible } from '~/ui/components/Collapsible';
import { FileTree } from '~/ui/components/FileTree';
import { Terminal } from '~/ui/components/Snippet';
import { Step } from '~/ui/components/Step';

Find the steps below to create a new project with Expo Router library or add it to your existing project.

## Quick start

<Step label="1">

We recommend creating a new Expo app using `create-expo-app` to create a project with Expo Router library already installed and configured:

<Terminal cmd={['$ npx create-expo-app@latest']} />

</Step>

<Step label="2">

Now, you can start your project by running:

<Terminal cmd={['$ npx expo start']} />

- To view your app on a mobile device, we recommend starting with [Expo Go](/get-started/set-up-your-environment/#how-would-you-like-to-develop). As your application grows in complexity and you need more control, you can create a [development build](/develop/development-builds/introduction/).
- Open the project in a web browser by pressing <kbd>w</kbd> in the Terminal UI. Press <kbd>a</kbd> for Android (Android Studio is required), or <kbd>i</kbd> for iOS (macOS with Xcode is required).

</Step>

## Manual installation

Follow the steps below if you have a project that was previously created with Expo but does not have Expo Router library installed.

### Prerequisites

Make sure your computer is [set up for running an Expo app](/get-started/create-a-project/).

<Step label="1">

### Install dependencies

You'll need to install the following dependencies:

<Terminal
  cmd={[
    '$ npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar',
  ]}
/>

The above command will install versions of these libraries that are compatible with the Expo SDK version your project is using.

</Step>

<Step label="2">

### Setup entry point

For the property `main`, use the `expo-router/entry` as its value in the **package.json**. The initial client file is [**app/\_layout.tsx**](/router/basics/layout/#root-layout).

```json package.json
{
  "main": "expo-router/entry"
}
```

<Collapsible summary="Custom entry point to initialize and load side-effects">

You can create a custom entry point in your Expo Router project to initialize and load side-effects before your app loads the root layout (**app/\_layout.tsx**). Below are some of the common cases for a custom entry point:

- Initializing global services like analytics, error reporting, and so on.
- Setting up polyfills
- Ignoring specific logs using `LogBox` from `react-native`

1. Create a new file in the root of your project, such as **index.js**. After creating this file, the project structure should look like this:

   <FileTree files={['app/_layout.tsx', 'index.js', 'package.json', 'Other project files']} />

2. Import or add your custom configuration to the file. Then, import `expo-router/entry` to register the app entry. Remember to always import it last to ensure all configurations are properly set up before the app renders.

   ```js index.js
   // Import side effects first and services

   // Initialize services

   // Register app entry through Expo Router
   import 'expo-router/entry';
   ```

3. Update the `main` property in **package.json** to point to the new entry file.

   ```json package.json
   {
     "main": "index.js"
   }
   ```

</Collapsible>

</Step>

<Step label="3">

### Modify project configuration

Add a deep linking `scheme` in your [app config](/workflow/configuration/):

```json app.json
{
  "scheme": "your-app-scheme"
}
```

If you are developing your app for web, install the following dependencies:

<Terminal cmd={['$ npx expo install react-native-web react-dom']} />

Then, enable [Metro web](/guides/customizing-metro/#adding-web-support-to-metro) support by adding the following to your [app config](/workflow/configuration/):

```json app.json
{
  "web": {
    "bundler": "metro"
  }
}
```

</Step>

<Step label="4">

### Modify babel.config.js

Ensure you use `babel-preset-expo` as the `preset`, in the **babel.config.js** file or delete the file:

```js babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};
```

</Step>

<Step label="5">

### Clear bundler cache

After updating the Babel config file, run the following command to clear the bundler cache:

<Terminal cmd={['$ npx expo start --clear']} />

</Step>

<Step label="6">

### Update resolutions

If you're upgrading from an older version of Expo Router, ensure you remove all outdated Yarn resolutions or npm overrides in your **package.json**. Specifically, remove `metro`, `metro-resolver`, `react-refresh` resolutions from your **package.json**.

</Step>
